서버 사이드 렌더링 (SSR [Server Side Rendering])

서버 사이드 렌더링 (SSR, Server-Side Rendering)은 웹 애플리케이션의 콘텐츠가 서버에서 렌더링된 후, 완전한 HTML 페이지가 클라이언트에 전송되는 방식입니다. 이 접근법은 사용자가 웹 페이지에 접근할 때마다 서버가 해당 페이지를 처리하고 생성하는 과정을 포함합니다.

주요 개념

1. 초기 요청: 사용자가 URL에 접근하면, 클라이언트는 서버에 요청을 보냅니다. 서버는 요청된 페이지의 콘텐츠를 동적으로 생성하여 HTML로 변환한 후, 이를 클라이언트에 전송합니다.

2. 렌더링: 클라이언트는 서버로부터 받은 HTML을 즉시 표시할 수 있습니다. 이후에 필요한 JavaScript 파일이 다운로드되고 실행되며, 페이지의 상호작용을 위한 클라이언트 측 로직이 활성화됩니다.

3. 페이지 전환: 이후 페이지 전환이 필요할 때, 클라이언트는 AJAX 요청을 통해 필요한 데이터를 서버에서 가져오고, 이를 바탕으로 페이지를 업데이트할 수 있습니다.

장점

1. 빠른 초기 로드: 서버에서 생성된 HTML을 클라이언트가 즉시 렌더링할 수 있기 때문에, 사용자에게 빠른 초기 로드 경험을 제공합니다.

2. SEO 최적화: 검색 엔진이 페이지의 HTML 콘텐츠를 쉽게 크롤링할 수 있어 SEO에 유리합니다. 콘텐츠가 서버에서 렌더링되기 때문에, 검색 엔진의 색인 생성에 도움이 됩니다.

3. 사회적 공유: SSR은 소셜 미디어 플랫폼에서 링크를 공유할 때 미리보기 이미지를 포함한 메타 태그를 쉽게 설정할 수 있어, 공유 시 더 나은 사용자 경험을 제공합니다.

단점

1. 서버 부하 증가: 모든 페이지 요청에 대해 서버가 렌더링을 수행해야 하므로, 서버의 부하가 증가할 수 있습니다. 트래픽이 많은 사이트에서는 성능 저하가 발생할 수 있습니다.

2. 네트워크 지연: 클라이언트는 매번 서버와 통신해야 하므로, 네트워크 지연이 발생할 수 있습니다. 특히 느린 네트워크 환경에서는 사용자 경험이 저하될 수 있습니다.

3. 상태 관리: 클라이언트와 서버 간의 상태 관리를 효율적으로 수행하는 것이 복잡할 수 있습니다. 클라이언트 상태와 서버 상태 간의 동기화가 필요합니다.

사용 사례

• 콘텐츠 중심의 웹사이트: 블로그, 뉴스 사이트, 전자상거래 웹사이트 등에서 사용됩니다. 이러한 사이트들은 SEO와 초기 로드 성능이 중요합니다.
• 대시보드 애플리케이션: 서버에서 데이터를 동적으로 렌더링해야 하는 대시보드에서 SSR이 효과적일 수 있습니다.
• 사회적 미디어 공유: 링크가 소셜 미디어에 공유될 때 미리보기 정보를 정확하게 제공하기 위해 SSR을 사용합니다.

결론

서버 사이드 렌더링은 초기 로드 속도와 SEO에 유리한 접근법으로, 콘텐츠 중심의 웹 애플리케이션에 적합합니다. 그러나 서버의 부하와 네트워크 지연 문제를 고려해야 하며, 사용자의 요구 사항에 맞게 CSR, SSG와 함께 적절히 선택하여 사용하는 것이 중요합니다.